<template>
  <div id="app">
    <h2>App内容</h2>
    <h2>数量：{{ $store.state.count }}</h2>
    <button @click="addition">+</button>
    <button @click="substraction">-</button>
    <h2>平方数量：{{ $store.getters.powerCount }}</h2>
    <h2>年龄大于18学生：{{ $store.getters.more18Students }}</h2>
    <h2>年龄大于18学生数量：{{ $store.getters.more18StudentsLength }}</h2>
    <h2>年龄大于age学生：{{ $store.getters.moreXStudents(16) }}</h2>
    <h2>--------------------------</h2>
    <hello-vuex />
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex.vue";
import { INCREMENT, DECREMENT } from "./store/mutations-types";
export default {
  name: "App",
  components: {
    HelloVuex,
  },
  methods: {
    addition() {
      this.$store.commit(INCREMENT);
    },
    substraction() {
      this.$store.commit(DECREMENT);
    },
  },
};
</script>

<style>
</style>
